import React, { memo,useEffect ,shallowequal,useCallback} from 'react'
import {useSelector,useDispatch,} from 'react-redux'
import HNThemeHeaderRecommend from 'components/theme-header-recommend'
import HNThemeCover from 'components/theme-cover'
import {getHotRecomendsAction} from '../../store/actionCreactor'
import {HotRecommendsWrap} from './style'
import {useHistory} from 'react-router-dom'
export default memo(function HNHotRecommend() {

  const dispatch = useDispatch();
  useEffect(()=>{
    dispatch(getHotRecomendsAction());
  },[dispatch])
  const {hotRecommends} = useSelector(state=>({
    hotRecommends : state.getIn(["recommend","hotRecommends"])
  }),shallowequal);
  const history = useHistory();

  const keyWordClick = useCallback(cat => {
    history.push({pathname:"/discover/playlist",cat})
  },[history])

  return (
    <HotRecommendsWrap>
        <HNThemeHeaderRecommend 
          title="热门推荐" 
          keyWords={["华语","流行","摇滚","民谣","电子"]}
          link="/discover/playlist"
          keyWordClick={keyWordClick}/>
        <div className="recommend-list">
          {
            hotRecommends.slice(0,8).map((item,index)=>{
              return(
                <HNThemeCover item={item} key={item.id}/>
              )
            })
          }
        </div>
    </HotRecommendsWrap>
  )
})
